<template>
    <div class="loginPage">
        <div class="box flex fixed_auto">
            <div class="login_left"></div>
            <div class="login_right flex flex_center align_center">
                <div class="loginVue flex relative">
                    <!-- 登录 -->
                    <div class="dialogContent relative" v-if="current===0">
                        <div class="dialogTitie">登录</div>
                        <div class="inpVue">
                            <el-input v-model="phone" placeholder="请输入手机号" @keydown.enter.native="handleEnter"></el-input>
                        </div>
                        <div class="inpVue relative" v-if="isCode">
                            <el-input v-model="code" placeholder="请输入验证码" @keydown.enter.native="handleEnter"></el-input>
                            <div class="sendCode absolute_middle" @click="sendCode">{{ text }}</div>
                        </div>
                        <div class="inpVue" v-else>
                            <el-input type="password" v-model="password" placeholder="请输入登录密码" @keydown.enter.native="handleEnter"></el-input>
                        </div>
                        <div class="flex_between margin20">
                            <span class="code" @click="isCode = !isCode">{{ isCode ? "使用密码登录" : "使用验证码登录" }}</span>
                            <span></span>
                            <span class="forget" @click="setCurrent(2)">忘记密码?</span>
                        </div>
                        <div class="btn" @click="loginFun">
                            <span class="el-icon-loading" v-if="loading"></span>
                            <span v-else>登录</span>
                        </div>
                        <div class="botVue absolute flex_between align_center">
                            <div class="link">
                                您登录即同意<span>用户协议</span>和<span>隐私政策</span>  
                            </div>
                            <div class="switchover" @click="setCurrent(1)">注册新账号</div>
                        </div>
                    </div>

                    <!-- 注册 -->
                    <div class="dialogContent relative" v-if="current===1">
                        <div class="dialogTitie">注册</div>
                        <div class="inpVue">
                            <el-input v-model="phone" placeholder="请输入手机号"></el-input>
                        </div> 
                        <div class="inpVue relative">
                            <el-input v-model="code" placeholder="请输入验证码"></el-input>
                            <div class="sendCode absolute_middle" @click="sendCode">{{ text }}</div>
                        </div>
                        <div class="inpVue">
                            <el-input type="password" v-model="password" placeholder="请设置登录密码(6-20字符)"></el-input>
                        </div>
                        <div class="inpVue">
                            <el-input type="password" v-model="re_password" placeholder="请确认密码"></el-input>
                        </div>
                        <div class="btn" @click="registerFun">
                            <span class="el-icon-loading" v-if="loading"></span>
                            <span v-else>注册</span>
                        </div>
                        <div class="botVue absolute flex_between align_center">
                            <div class="link">
                                您注册即同意<span>用户协议</span>和<span>隐私政策</span>  
                            </div>
                            <div class="switchover" @click="setCurrent(0)">立即登录</div>
                        </div>
                    </div>

                    <!-- 忘记密码 -->
                    <div class="dialogContent relative" v-if="current===2">
                        <div class="dialogTitie">忘记密码</div>
                        <div class="inpVue">
                            <el-input v-model="phone" placeholder="请输入手机号"></el-input>
                        </div> 
                        <div class="inpVue relative">
                            <el-input v-model="code" placeholder="请输入验证码"></el-input>
                            <div class="sendCode absolute_middle" @click="sendCode">{{ text }}</div>
                        </div>
                        <div class="inpVue">
                            <el-input type="password" v-model="password" placeholder="请设置登录密码(6-20字符)"></el-input>
                        </div>
                        <div class="inpVue">
                            <el-input type="password" v-model="re_password" placeholder="请再次输入密码"></el-input>
                        </div>
                        <div class="btn" @click="forgetFun">
                            <span class="el-icon-loading" v-if="loading"></span>
                            <span v-else>确认</span>
                        </div>
                        <div class="tobtn margin10"><span @click="setCurrent(0)">去登录</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mobile } from "@/common/verification.js"
    import { toast } from "@/common/tools.js"
    export default {
        data(){
            return {
                phone: "",
                code: "",
                password: "",
                re_password: "",
                current: 0,
                isCode: false,
                text: "获取验证码",
                loading: false
            }
        },
        methods: {
            setCurrent(index){
                this.current = index
                this.code = ""
                this.password = ""
                this.re_password = ""
                this.loading = false
            },

            handleEnter(){
                this.loginFun()
            },

            //登录
            async loginFun(){
                if(!mobile(this.phone)) return toast(1, "请输入正确手机号")
                if(!this.isCode && !this.password) return toast(1, "请输入登录密码")
                if(this.isCode && !this.code) return toast(1, "请输入验证码")
                let url = this.isCode ? "/front/codeLogin" : "/front/login"
                let data = this.isCode ? {name: this.phone, code: this.code, loginType: "PC"} : {name: this.phone, password: this.password, loginType: "PC"} 
                if(this.loading) return
                this.loading = true
                let res = await this.$post(url, data)
                if(res.data.code===0) {
                    this.loading = false
                    toast(0, "登录成功")
                    window.localStorage.setItem("ai_token", res.data.obj)
                    setTimeout(() => {
                        this.$store.dispatch("getUser")
                        this.$router.push({ name: "weChat" })
                        this.$store.state.statusRandom = 1
                    }, 500);
                }else{
                    this.loading = false
                    toast(1, res.data.msg)
                }
            },

            // 注册
            async registerFun(){
                if(!mobile(this.phone)) return toast(1, "请输入正确手机号")
                if(!this.code) return toast(1, "请输入验证码")
                if(this.password.length < 6 || this.password.length > 20) return toast(1, "设置的登录密码在6-20字符之间") 
                if(this.password!=this.re_password) return toast(1, "两次密码输入不一致")
                if(this.loading) return
                this.loading = true
                let res = await this.$post("/front/register", {
                    name: this.phone,
                    password: this.password,
                    code: this.code
                })
                if(res.data.code===0) {
                    this.loading = false
                    toast(0, "注册成功")
                    this.setCurrent(0)
                }else{
                    this.loading = false
                    toast(1, res.data.msg)
                }
            },

            // 忘记密码
            async forgetFun(){
                if(!mobile(this.phone)) return toast(1, "请输入正确手机号")
                if(!this.code) return toast(1, "请输入验证码")
                if(this.password.length < 6 || this.password.length > 20) return toast(1, "设置的登录密码在6-20字符之间") 
                if(this.password != this.re_password) return toast(1, "两次密码输入不一致")
                if(this.loading) return
                this.loading = true
                let res = await this.$post("front/search/forgotPwd", {
                    name: this.phone,
                    password: this.password,
                    code: this.code
                })
                if(res.data.code===0) {
                    this.loading = false
                    toast(0, "修改成功")
                    this.setCurrent(0)
                }else{
                    this.loading = false
                    toast(1, res.data.msg)
                }
            },

            // 发送验证码
            async sendCode(){
                if(this.text != '获取验证码') return toast(1, this.text + "后可重新获取")
                if(!mobile(this.phone)) return toast(1, "请输入正确手机号")
                let res = await this.$post("/front/authCode/sendCode", {
                    account: this.phone
                })
                if(res.data.code===0) {
                    toast(0, "发送成功")
                    let count = 60
                    this.text = `${count}s`
                    let timer = setInterval(()=>{
                        count--;
                        this.text = `${count}s`;
                        if (count === 0) {
                            clearInterval(timer);
                            this.text = '获取验证码';
                        }
                    }, 1000)
                }else{
                    toast(1, res.data.msg)
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.loginPage {
    width: 100vw;
    height: 100vh;
    .box {
        width: 900px;
        height: 500px;
        border-radius: 5px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 1px rgba(0,35,32,0.13);
        overflow: hidden;
    }
    .login_left {
        width: 500px;
        height: 500px;
        background: url("../../assets/login-0e36dbc5.jpg") no-repeat;
        background-size: 100% 100%;
    }
    .login_right {
        width: 400px;;
        height: 500px;
        .loginVue {
            width: 400px;
            height: 500px;
            
            .closeIcon {
                font-size: 20px;
                top: 20px;
                right: 20px;
                cursor: pointer;
                z-index: 99999;
            }
            .dialogContent {
                width: 400px;
                height: 500px;
                padding: 40px;
                .dialogTitie {
                    text-align: center;
                    color: #000;
                    font-size: 18px;
                    font-weight: 600; 
                    margin-bottom: 50px; 
                }
                .inpVue {
                    margin-top: 20px;
                    .sendCode {
                        right: 15px;
                        color: #0147fd;
                        cursor: pointer;
                    }
                }
                .code {
                    color: #0147fd;
                    cursor: pointer;
                    font-size: 13px;
                }
                .forget {
                    color: #AAA;
                    cursor: pointer;
                    font-size: 13px;
                }
                .btn {
                    width: 100%;
                    height: 42px;
                    background: #0147fd;
                    margin-top: 50px;
                    text-align: center;
                    line-height: 42px;
                    border-radius: 8px;
                    cursor: pointer;
                    span {
                        font-weight: 600;
                        color: #fff;
                    }
                }
                .tobtn {
                    width: 100%;
                    height: 42px;
                    text-align: center;
                    line-height: 42px;
                    span {
                        color: #0147fd;
                        cursor: pointer;
                        font-weight: 600;
                    }
                }
                .botVue {
                    width: 400px;
                    height: 50px;
                    background: #f5f5f5;
                    left: 0;
                    bottom: 0;
                    padding: 0 15px;
                    .link {
                        color: #81868e;
                        font-size: 12px;
                        span {
                            color: #000;
                            cursor: pointer;
                            padding: 0 5px;
                            font-weight: 500;
                            font-size: 12px;
                            text-decoration: underline;
                        }
                        span:hover {
                            color: #0147fd;
                        }
                    }
                    .switchover {
                        color: #0147fd;
                        font-size: 13px;
                        cursor: pointer;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}
</style>